<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>提交申请</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/free.css">
    <style>
        .text {
		    line-height: 70rem;
	    }
	
	    .text+ .text {
		    margin-left: 20rem;
	    }
        
        input {
            border: none;       /* 去掉边框 */
            background: none;   /* 去掉背景 */
            padding: 0;         /* 去掉内边距 */
            margin: 0;          /* 去掉外边距 */
            outline: none;      /* 去掉聚焦时的轮廓 */
            appearance: none;   /* 去掉系统默认样式（如搜索框的删除按钮） */
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-row style="padding-bottom: 140rem;">
            <!-- 提交信息 -->
            <el-col :xs="24" class="pt-2">
                <div class="mx-2 rounded-lg bg-white">
                    <div class="flex justify-between align-center py-2 border-bottom">
                        <span class="font font-weight-bold ml-2">申请信息</span>
                    </div>
                    <div class="mx-2 py-2 flex align-center border-bottom border-light">
                        <span class="font flex-shrink" style="width: 25%;"><i class="text-danger">* </i>交易数量</span>
                        <el-input-number @change="changeQuantity"
                            :min="Number(form.Remain_Quantity) > Number(form.Start_Quantity) ? Number(form.Start_Quantity) : Number(form.Remain_Quantity)"
                            :max="Number(form.Remain_Quantity)"
                            :step="Number(form.Unit_Quantity)" step-strictly type="number"
                        v-model="formData.Quantity" class="ml-2 font w-100"></el-input-number>
                    </div>
                    <div class="mx-2 py-2 flex align-center">
                        <span class="font flex-shrink" style="width: 25%;"><i class="text-danger">* </i>付款类型</span>
                        <el-select class="ml-2 font w-100" v-model.trim="formData.Trading_SerialNumber" placeholder="请选择付款类型" clearable filterable>
                            <el-option v-for="(item,index) in trading" :key="index" :label="item.Trading_Name" :value="item.Trading_SerialNumber" />
                        </el-select>
                    </div>
                    <div class="mx-2 py-2 flex align-center">
                        <span class="font flex-shrink" style="width: 25%;"><i class="text-danger">* </i>支付方式</span>
                        <el-select class="ml-2 font w-100" v-model.trim="formData.Payment_Method_SerialNumber" placeholder="请选择支付方式" clearable filterable>
                            <el-option v-for="(item,index) in payment_method" :key="index" :label="item.Payment_Method" :value="item.Payment_Method_SerialNumber" />
                        </el-select>
                    </div>
                    <div class="mx-2 py-2 flex align-center">
                        <span class="font flex-shrink" style="width: 25%;"><i class="text-danger">* </i>装运方式</span>
                        <el-select class="ml-2 font w-100" v-model.trim="formData.Shipment_Method_SerialNumber" placeholder="请选择装运方式" clearable filterable>
                            <el-option v-for="(item,index) in shipment_method" :key="index" :label="item.Shipment_Method" :value="item.Shipment_Method_SerialNumber" />
                        </el-select>
                    </div>
                    <div class="mx-2 py-2 flex align-center">
                        <span class="font flex-shrink" style="width: 25%;"><i class="text-danger">* </i>运输方式</span>
                        <el-select class="ml-2 font w-100" v-model.trim="formData.Transport_Method_SerialNumber" placeholder="请选择运输方式" clearable filterable>
                            <el-option v-for="(item,index) in transport_method" :key="index" :label="item.Transport_Method" :value="item.Transport_Method_SerialNumber" />
                        </el-select>
                    </div>
                    <div class="mx-2 py-2 flex align-center">
                        <span class="font flex-shrink" style="width: 25%;"><i class="text-danger">* </i>联系人</span>
                        <el-input v-model="formData.Contacts" class="ml-2 font w-100" placeholder="请输入联系人"></el-input>
                    </div>
                    <div class="mx-2 py-2 flex align-center">
                        <span class="font flex-shrink" style="width: 25%;"><i class="text-danger">* </i>联系电话</span>
                        <el-input v-model="formData.Contacts_Phone" class="ml-2 font w-100" placeholder="请输入联系电话"></el-input>
                    </div>
                    <div class="mx-2 py-2 flex align-center">
                        <span class="font flex-shrink" style="width: 25%;"><i class="text-danger">* </i>收货地址</span>
                        <el-cascader @change="changeCity" v-model.trim="formData.CountyNumber" filterable class="ml-2 font w-100"
                            :props="{label:'name',value:'code',emitPath:false}" :options="city" clearable
                            placeholder="请选择收货地址" style="width: 100%;"></el-cascader>
                    </div>
                    <div class="mx-2 py-2 flex align-start">
                        <span class="font flex-shrink" style="width: 25%;"><i class="text-danger">* </i>详细地址</span>
                        <el-input type="textarea" :autosize="{ minRows: 2}" v-model="formData.Detailed_Address" class="ml-2 font w-100" placeholder="请输入详细地址"></el-input>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24">
                <div class="flex align-center bg-white fixed-bottom shadow" style="height: 120rem;">
                    <div class="flex-shrink ml-2">
                        <span class="font font-weight-bold text-dark">总计</span>
                        <span class="font-lg font-weight-bold text-success">￥{{ formData.Amount }}</span>
                    </div>
                    <div @click="handleSubmit" class="mx-2 bg-success w-100 flex justify-center align-center text-white rounded-circle "  style="height: 80rem;">
                        <span class="font font-weight-bold">申请交易</span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/jweixin.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/purchase-submit.js"></script>
</body>

</html>